<template>
	<div class="public_main">
		<div class="crumbs">
      <el-breadcrumb separator="/">
        <template v-if="from=='merchant'">
					<el-breadcrumb-item>{{$t('dashBoard.no2')}}</el-breadcrumb-item>
					<el-breadcrumb-item>{{$t('dashBoard.no3')}}</el-breadcrumb-item>
					<el-breadcrumb-item >{{$t('merchantList.no66')}}</el-breadcrumb-item>
				</template>
				<template v-else-if="from=='onemerchant'">
					<el-breadcrumb-item>{{$t('sidebar.operator')}}</el-breadcrumb-item>
					<el-breadcrumb-item>{{$t('sidebar.processConfig')}}</el-breadcrumb-item>
					<el-breadcrumb-item>{{$t('sidebar.processConfig')}}</el-breadcrumb-item>
				</template>
				<template v-else>
					<el-breadcrumb-item>{{$t('dashBoard.no19')}}</el-breadcrumb-item>
					<el-breadcrumb-item>{{$t('dashBoard.no20')}}</el-breadcrumb-item>
        	<el-breadcrumb-item>{{$t('dashBoard.no8')}}</el-breadcrumb-item>
				</template>
        <el-breadcrumb-item>{{$t('flowOfCreditConfig.no4')}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

		<!-- 商户名称,商户ID -->
		<div class="oneLineHasOne">
			<p >
				<span>{{$t('merchantList.no8')}}:</span>
				<span>{{partnerNo}}</span>
			</p>
		</div> 
		<div class="oneLineHasOne ">
			<p >
				<span>{{$t('merchantList.no1')}}:</span>
				<span>{{partnerName}}</span>
			</p>
		</div> 
		<p class="mb30"></p>

		<!-- 客服分单设置 -->
		<div class="pos mb20">
			<el-button size="small" v-if="!submenuFlag" type="primary" class="pos-right" @click="changeSubmenu">{{$t('public.no51')}}</el-button>
			<el-button size="small" v-else type="primary" class="pos-right" @click="changeSubmenuSure">{{$t('public.no49')}}</el-button>
			<h3 class="mb20 blue">{{$t('flowOfCreditConfig.no23')}}</h3>
			<el-form ref="addForm" :model="form" size="small" >
				<el-form-item :label="$t('flowOfCreditConfig.no25')">
					<el-radio-group v-model="form.orderManualReconciliationReview" >
						<el-radio :label="1" :disabled="!submenuFlag">Yse</el-radio>
						<el-radio :label="2" :disabled="!submenuFlag">No</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>
			<p class="f14">{{$t('long.no3')}}</p>
		</div>
		

		<!-- 客服阶段设置 -->
		<div class="pos">
			<el-button size="small" v-if="!stageFlag" type="primary" class="pos-right" @click="changeBackType">{{$t('public.no51')}}</el-button>
			<el-button size="small" v-else type="primary" class="pos-right" @click="changeBackTypeSure">{{$t('public.no49')}}</el-button>
			<h3 class="mb20 blue">{{$t('flowOfCreditConfig.no24')}}</h3>
			<el-form ref="addForm" :model="form" size="small" >
				<el-form-item :label="$t('flowOfCreditConfig.no26')">
					<el-select style="width:500px" v-model="form.backType" multiple placeholder="请选择" :disabled="!stageFlag">
						<el-option
							v-for="item in options"
							:key="item.value"
							:label="item.label"
							:value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<p class="f14">{{$t('long.no4')}}</p>
		</div>
		
	</div>
</template>

<script>
export default {
	name: 'serviceProcess',
  data () {
    return {
			from: '',
			partnerNo: '',
			partnerId: '',
			partnerName: '',
			stageFlag: true,// 平账流程配置
			submenuFlag: true,// 还款方式配置
			manualReconciliationConfigList: [],
			form: {
				backType:[],
				orderManualReconciliationReview: ''
			},
			options: []// 渠道下拉框
    }
  },
  methods: {
		changeSubmenu(){
			this.submenuFlag = true
		},
		changeSubmenuSure(){
			let options = {
        param: {
					partnerId: this.partnerId,
					orderManualReconciliationReview: this.form.orderManualReconciliationReview
				}
			}
			this.$axios.post(this.$action.reconciliation_update, options).then(res => {
        if (res.code == 200) {
          this.$globalMsg.success(this.$t('message.success'))
        }else{
          this.$globalMsg.error(res.message)
				}
				this.submenuFlag = false
      })
		},
		changeBackType(){
			this.stageFlag = true
		},
		changeBackTypeSure(){
			let options = {
        param: {
					partnerId: this.partnerId,
					manualReconciliationIdList: this.form.backType
				}
			}
			this.$axios.post(this.$action.reconciliation_save, options).then(res => {
        if (res.code == 200) {
          this.$globalMsg.success(this.$t('message.success'))
        }else{
          this.$globalMsg.error(res.message)
				}
				this.stageFlag = false
      })
			
		},
		getDetailData(){
      let option = {
				param:{
					partnerId:this.partnerId, 
				}
      }
      this.$axios.post(this.$action.reconciliation_pageinfo, option).then(res => {
        if (res.code == 200) {
          this.partnerName = res.data.partnerName;
          this.partnerNo = res.data.partnerNo;
          // this.orderDistFormCollection = res.data.orderDistFormCollection
					this.manualReconciliationConfigList = res.data.manualReconciliationConfigList
					this.form.orderManualReconciliationReview = res.data.orderManualReconciliationReview
					this.manualReconciliationConfigList.forEach(value=>this.form.backType.push(value.id))
					
				} else {
          this.$globalMsg.error(res.message)
        }
				this.submenuFlag = false
				this.stageFlag = false
      })
    },
		getPayChannelData(){
      let option = {
				param:{
					partnerId:this.partnerId,  
				}
      }
      this.$axios.post(this.$action.channel_list, option).then(res => {
        if (res.code == 200) {
          res.data.forEach(item=>{
						this.options.push({value:item.id,label:item.channelName})
					})
				}
      })
    },
  },
  mounted () {
		this.partnerId = this.$route.query.id
		this.from = this.$route.query.from
		this.getDetailData()
		this.getPayChannelData()
  }
}
</script>

<style scoped lang="scss">

</style>